<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/popper.min.js">
		</script>
		<script src="js/jquery-3.6.0.min.js">		
		</script>
		<script src="js/bootstrap.min.js">
		</script>
		<style type="text/css">
			.kd{
				width: 700px;
			}
			.sz{
				
				width: 50px;
			}
			.bj{
				display: flex;
				flex-direction: row;
				
			}
			.zt{
				display: flex;
				flex-direction: row;
			}
			th{
				text-align: center;
				width: 150px;
			}
			.juli{
				margin-left: 150px;
			}
			.btn{
				background-color: blue;
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="zt">
			<div class="juli">
				<div><form class="kd">
  <div class="form-group">
    <span>书名:</span>
    <input type="text"  class="form-control" id="sd">
    <label for="exampleInputPassword1">编号:</label>
    <input type="number" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">价格:</label>
    <input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  </div>
  <div class="bj">
  	<div class="jl" >
				 <span>爱好：</span><!-- 多选框 --></div>
				 <div class="sz">
	            <input type="checkbox" value="xuanhan" name="subject">玄幻<input type="checkbox" value="wuxia" name="subject">武侠<input type="checkbox" value="jingdian" name="subject">经典<input type="checkbox" value="qita" name="subject">其他
            </div>
           
  </div>
  <div>
					<input type="button" value="新增" class="btn">
					<input type="button" value="更新" class="btn">
				</div>
			</div></div>
			
 
			
 <div></form>
	<table id="msg">
	   <tr>
	   	<th>#</th>
	   	<th>书名</th>
		   <th>编号</th>
		    <th>价格</th>
			 <th>类型</th>
			  <th>操作栏</th>
	   </tr>
	 
   </table>
    <script>
        let btn=document.querySelector("button"),
           text=document.getElementById("sd"),
            msg=document.getElementById(".msg");
        btn.onclick=function(){
            if(text.value){
                msg.innerHTML+="<th class='msglist'>"+text.value+"</th>";
                text.value="";
            }else{
                alert("你尚未输入信息,请重新输入")
            }
        }
       
    </script>
	</body>
</html>
